एचटीएमएल टेबल
HTML तालिकाएँ वेब डेवलपर्स को डेटा को पंक्तियों और स्तंभों में व्यवस्थित करने की अनुमति देती हैं।
| कंपनी | संचार | देश |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | Germany |
| Centro comercial Moctezuma | Francisco Chang | Mexico |
| Ernst Handel | Roland Mendel | Austria |
| Island Trading | Helen Bennett | UK |
| Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
HTML तालिका को परिभाषित करना
HTML में एक तालिका में पंक्तियों और स्तंभों के भीतर तालिका कोशिकाएँ होती हैं।
उदाहरण
एक सरल HTML तालिका:
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>टेबल सेल
प्रत्येक तालिका सेल को <td> और </td> टैग द्वारा परिभाषित किया गया है।
td का मतलब टेबल डेटा है।
<td> और </td> के बीच की हर चीज़ एक तालिका सेल की सामग्री है।
उदाहरण
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>नोट:
एक तालिका सेल में सभी प्रकार के HTML तत्व शामिल हो सकते हैं: पाठ, चित्र, सूचियाँ, लिंक, अन्य तालिकाएँ, आदि।
टेबल पंक्तियाँ
प्रत्येक तालिका पंक्ति <tr> से शुरू होती है और </tr> टैग पर समाप्त होती है।
tr का मतलब टेबल पंक्ति है।
उदाहरण
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>एक तालिका में उतनी पंक्तियाँ हो सकती हैं जितनी आपको आवश्यकता हो; सुनिश्चित करें कि प्रत्येक पंक्ति में कोशिकाओं की संख्या समान है।
नोट:
ऐसे समय होते हैं जब एक पंक्ति में दूसरी पंक्ति की तुलना में कम या अधिक कोशिकाएँ होती हैं। इसके बारे में आप बाद के अध्याय में जानेंगे।
टेबल हेडर सेल
कभी-कभी आप चाहते हैं कि आपके सेल टेबल हेडर सेल हों। उन मामलों में <td> टैग के बजाय <th> टैग का उपयोग करें:
वें का मतलब टेबल हेडर है।
उदाहरण
मान लीजिए कि पहली पंक्ति तालिका हेडर सेल है:
<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>डिफ़ॉल्ट रूप से, <th> तत्वों में टेक्स्ट बोल्ड और केंद्रित होता है, लेकिन आप इसे सीएसएस के साथ बदल सकते हैं।
अभ्यास
HTML में टेबल-सेल के लिए सही टैग नाम क्या है?
HTML तालिका टैग
| टैग | व्याख्या |
|---|---|
| <table> | एक तालिका परिभाषित करता है |
| <th> | तालिका में हेडर सेल को परिभाषित करता है |
| <tr> | तालिका में एक पंक्ति को परिभाषित करता है |
| <td> | तालिका में एक सेल को परिभाषित करता है |
| <caption> | तालिका शीर्षक को परिभाषित करता है |
| <colgroup> | स्वरूपण के लिए तालिका में एक या अधिक स्तंभों का समूह निर्दिष्ट करता है |
| <col> | <colgroup> तत्व के भीतर प्रत्येक कॉलम के लिए कॉलम विशेषताएँ निर्दिष्ट करता है |
| <thead> | तालिका विषय सामग्री का सारांश प्रस्तुत करती है |
| <tbody> | मुख्य सामग्री को तालिकाओं में संकलित करता है |
| <tfoot> | एडिनोट तालिका में सामग्री का सारांश प्रस्तुत करता है |
सभी उपलब्ध HTML टैग्स की पूरी सूची के लिए, हमारे HTML टैग संदर्भ पर जाएँ।